<template>
    <div class="flx1 yy-alertwrap" v-if="show" style="top: 44.5%">
        <div class="yy0827-mod1">
            <div class="gap"></div>
            <div class="flx1 ac jb alert-hd">
                <p class="yy0825-alertit">数据总览</p>
                <i class="yy0827-close" @click="close"></i>
            </div>
            <div class="gap"></div>
            <div class="gap"></div>
            <ul class="flx1 ac jb yy0825-cjcgbox1">
                <li>
                    <p class="p1">数据项</p>
                    <p class="p2">
                        <em>{{ data.sjx }}</em
                        >个
                    </p>
                </li>
                <li>
                    <p class="p1">数据容量</p>
                    <p class="p2">
                        <em>{{ data.sjrl }}</em
                        >TB
                    </p>
                </li>
            </ul>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="yy0825-cell" style="height: 100px">
                <h1 class="yy0825-celltit">监测能力</h1>
                <div class="gap"></div>
                <div class="flx1 ac jb yy0827-jcnlbox1">
                    <div class="f1">视频资源</div>
                    <div class="f1">
                        <em>{{ data.spzy }}</em
                        >个
                    </div>
                </div>
            </div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="flx1 jb">
                <div class="yy0825-cell" style="flex: 1px; height: 100px">
                    <h1 class="yy0825-celltit">生态环境归集</h1>
                    <div class="gap"></div>
                    <div class="yy0827-jcfbox1">
                        <em>{{ data.sthjgj }}</em
                        >万条
                    </div>
                </div>
                <div class="yy0825-cell" style="flex: 1px; height: 100px; margin-left: 12px">
                    <h1 class="yy0825-celltit">市级部门归集</h1>
                    <div class="gap"></div>
                    <div class="yy0827-jcfbox1">
                        <em>{{ data.sjbmgj }}</em
                        >万条
                    </div>
                </div>
            </div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <h1 class="yy0825-celltit">大脑产品</h1>
            <div class="gap"></div>
            <div class="gap"></div>
            <div
                class="yy0827-dnbox1"
                style="cursor: pointer"
                @click="popShow = true"
                :class="popShow ? 'yy0827-dnbox1_on' : ''"
            >
                <i class="yy0825-tick" v-show="popShow"></i>
                <ul class="flx1 ac jb list1">
                    <li>
                        <p class="p1">数据类</p>
                        <p class="p2">
                            <em>{{ data.sjl }}</em
                            >个
                        </p>
                    </li>
                    <li>
                        <p class="p1">组件类</p>
                        <p class="p2">
                            <em>{{ data.zjl }}</em
                            >个
                        </p>
                    </li>
                </ul>
                <div class="gap"></div>
                <div class="gap"></div>
                <ul class="flx1 ac jb list1">
                    <li>
                        <p class="p1">共享单位</p>
                        <p class="p2">
                            <em>{{ data.gxdw }}</em
                            >个
                        </p>
                    </li>
                    <li>
                        <p class="p1">共享服务</p>
                        <p class="p2">
                            <em>{{ data.gxfw }}</em
                            >项
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="yy0827-mod2" style="margin-left: 15px" v-if="popShow">
            <div class="gap"></div>
            <div class="flx1 ac jb alert-hd">
                <p class="yy0825-alertit">大脑产品</p>
                <i class="yy0827-close" @click="popShow = false"></i>
            </div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="flx1 jb">
                <div class="yy0825-cell" style="flex: 1px; height: 728px; margin-right: 20px">
                    <h1 class="yy0825-celltit">数据类</h1>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="flx1 jb yy0827-datacell" style="height: 92px">
                        <div class="lfbox">
                            <p class="p1">总数</p>
                            <p class="p2">{{ dncpData.sjl.list.length }}</p>
                        </div>
                        <div class="rtbox">
                            <div class="flx1 ac jb">
                                <p class="f1">接口数据集</p>
                                <p class="f2">{{ dncpData.sjl.one }}</p>
                            </div>
                            <div class="flx1 ac jb" style="margin-top: 6px">
                                <p class="f1">批量数据集</p>
                                <p class="f2">{{ dncpData.sjl.two }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="yy-twrap1" style="height: calc(100% - 160px); overflow: hidden">
                        <table class="yy0827-table1">
                            <colgroup>
                                <col width="15%" />
                                <col width="" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th class="tal">目录名称</th>
                                    <th>被调用次数</th>
                                </tr>
                            </thead>
                        </table>
                        <div
                            class="txtMarquee-top1 hidden-scrollbar"
                            style="height: 490px; overflow-y: auto"
                        >
                            <table class="yy0827-table1">
                                <colgroup>
                                    <col width="15%" />
                                    <col width="" />
                                    <col width="30%" />
                                </colgroup>
                                <tbody>
                                    <tr v-for="(item, index) in dncpData.sjl.list" :key="index">
                                        <td>{{ index + 1 }}</td>
                                        <td class="tal">{{ item.biz_name }}</td>
                                        <td class="num">{{ item.qto_value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="yy0825-cell" style="flex: 1px; height: 728px; margin-right: 20px">
                    <h1 class="yy0825-celltit">组件类</h1>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="flx1 jb yy0827-datacell" style="height: 92px">
                        <div class="lfbox">
                            <p class="p1">总数</p>
                            <p class="p2">{{ dncpData.zjl.list.length }}</p>
                        </div>
                        <div class="rtbox">
                            <div class="flx1 ac jb">
                                <p class="f1">接口</p>
                                <p class="f2">{{ dncpData.zjl.one }}</p>
                            </div>
                            <div class="flx1 ac jb" style="margin-top: 6px">
                                <p class="f1">工具</p>
                                <p class="f2">{{ dncpData.zjl.two }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="yy-twrap1" style="height: calc(100% - 160px); overflow: hidden">
                        <table class="yy0827-table1">
                            <colgroup>
                                <col width="15%" />
                                <col width="" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th class="tal">目录名称</th>
                                    <th>数量</th>
                                </tr>
                            </thead>
                        </table>
                        <div
                            class="txtMarquee-top1 hidden-scrollbar"
                            style="height: 490px; overflow-y: auto"
                        >
                            <table class="yy0827-table1">
                                <colgroup>
                                    <col width="15%" />
                                    <col width="" />
                                    <col width="30%" />
                                </colgroup>
                                <tbody>
                                    <tr v-for="(item, index) in dncpData.zjl.list" :key="index">
                                        <td>{{ index + 1 }}</td>
                                        <td class="tal">{{ item.biz_name }}</td>
                                        <td class="num">{{ item.qto_value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="yy0825-cell" style="flex: 1px; height: 728px">
                    <h1 class="yy0825-celltit">共享服务</h1>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="flx1 jb yy0827-datacell" style="height: 92px">
                        <div class="lfbox">
                            <p class="p1">总数</p>
                            <p class="p2">{{ dncpData.gxfw.list.length }}</p>
                        </div>
                        <div class="rtbox">
                            <div class="flx1 ac jb">
                                <p class="f1">市级部门</p>
                                <p class="f2">{{ dncpData.gxfw.one }}</p>
                            </div>
                            <div class="flx1 ac jb" style="margin-top: 6px">
                                <p class="f1">区级部门</p>
                                <p class="f2">{{ dncpData.gxfw.two }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="gap"></div>
                    <div class="gap"></div>
                    <div class="yy-twrap1" style="height: calc(100% - 160px); overflow: hidden">
                        <table class="yy0827-table1">
                            <colgroup>
                                <col width="15%" />
                                <col width="" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th class="tal">目录名称</th>
                                    <th>申请数量</th>
                                </tr>
                            </thead>
                        </table>
                        <div
                            class="txtMarquee-top1 hidden-scrollbar"
                            style="height: 490px; overflow-y: auto"
                        >
                            <table class="yy0827-table1">
                                <colgroup>
                                    <col width="15%" />
                                    <col width="" />
                                    <col width="30%" />
                                </colgroup>
                                <tbody>
                                    <tr v-for="(item, index) in dncpData.gxfw.list" :key="index">
                                        <td>{{ index + 1 }}</td>
                                        <td class="tal">{{ item.biz_name }}</td>
                                        <td class="num">{{ item.qto_value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/api/request'
export default {
    name: 'DataOverview',
    data() {
        return {
            show: false,
            popShow: false,
            data: {
                sjx: 0,
                sjrl: 0,
                spzy: 3003,
                sthjgj: 0,
                sjbmgj: 0,
                sjl: 0,
                zjl: 0,
                gxdw: 0,
                gxfw: 0,
            },
            dncpData: {
                sjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                zjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                gxfw: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
            },
        }
    },
    created() {
        window.DataOverview = {
            // 打开面板
            open: this.open,
            // 关闭面板
            close: this.close,
            isOpen: false,
        }
    },
    mounted() {},
    methods: {
        // 打开数据总览弹框方法
        open() {
            window.DataOverview.isOpen = true
            this.show = true
            this.$nextTick(() => {
                this.getSjzl()
                this.getDncp()
            })
        },
        // 关闭面板的方法
        close() {
            window.DataOverview.isOpen = false
            this.show = false
            this.popShow = false
        },
        getSjzl() {
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/20040/zyml/data_assets',
                method: 'get',
            }).then(res => {
                this.data.sjx = res.data.ev_data_info[0].sjx
                this.data.sjrl = res.data.ev_data_info[0].sjrl
                this.data.sthjgj = res.data.ev_data_info[0].ev_dept
                this.data.sjbmgj = res.data.ev_data_info[0].adj_dept
                this.data.sjl = res.data.ev_product[0].data_directory
                this.data.zjl = res.data.ev_product[0].data_assembly
                this.data.gxdw = res.data.ev_product[0].apply_dept
                this.data.gxfw = res.data.ev_product[0].apply
            })
        },
        getDncp() {
            this.dncpData = {
                sjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                zjl: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
                gxfw: {
                    zs: 0,
                    one: 0,
                    two: 0,
                    list: [],
                },
            }
            axios({
                url: '/out/bwapp/dataservice/sjcl/api/20040/zyml/ev_product_info',
                method: 'get',
            }).then(res => {
                res.data.ev_product_quota.forEach(e => {
                    if (e.qto_type == '数据类') {
                        if (e.qto_name == '接口数据集') {
                            this.dncpData.sjl.one = e.qto_value
                        }
                        if (e.qto_name == '批量数据集') {
                            this.dncpData.sjl.two = e.qto_value
                        }
                    } else if (e.qto_type == '组件类') {
                        if (e.qto_name == '接口') {
                            this.dncpData.zjl.one = e.qto_value
                        }
                        if (e.qto_name == '工具') {
                            this.dncpData.zjl.two = e.qto_value
                        }
                    } else if (e.qto_type == '共享服务') {
                        if (e.qto_name == '市级部门') {
                            this.dncpData.gxfw.one = e.qto_value
                        }
                        if (e.qto_name == '区级部门') {
                            this.dncpData.gxfw.two = e.qto_value
                        }
                    }
                })

                res.data.ev_product_quota_list.forEach(e => {
                    if (e.qto_type == '数据类') {
                        this.dncpData.sjl.list.push(e)
                    }
                    if (e.qto_type == '组件类') {
                        this.dncpData.zjl.list.push(e)
                    }
                    if (e.qto_type == '共享服务') {
                        this.dncpData.gxfw.list.push(e)
                    }
                })

                this.dncpData.sjl.list.sort((a, b) => {
                    return b.qto_value - a.qto_value
                })
                this.dncpData.zjl.list.sort((a, b) => {
                    return b.qto_value - a.qto_value
                })
                this.dncpData.gxfw.list.sort((a, b) => {
                    return b.qto_value - a.qto_value
                })
            })
        },
    },
}
</script>

<style scoped>
@import '../NumSmallHelpMin/assets/css/reset.css';
@import '../NumSmallHelpMin/assets/css/zy0822.css';
@import '../NumSmallHelpMin/assets/css/my0825.css';
@import '../NumSmallHelpMin/assets/css/my0827.css';
.yy0827-dnbox1_on {
    background: rgba(0, 73, 65, 0.7) !important;
    border: 1px solid #00e87e !important;
}
/* 隐藏 Firefox 的滚动条 */
.hidden-scrollbar {
    scrollbar-width: none;
}
.yy0827-jcfbox1 {
    font-size: 16px;
}
</style>
